import React, {useCallback, useEffect, useState} from 'react';
import {
  StyleSheet,
  ScrollView,
  Text,
  View,
  FlatList,
  Platform,
  Image,
} from 'react-native';
import ListLayout from '../../component/home/ListLayout';
import HomeTop from '../../component/home/HomeTop';
import HomeTopSearch from '../../component/home/HomeTopSearch';
import {useTrackData} from '../../mixins';
import Swiper from '../../component/base/Swiper/index';
import RenderPagination from '../../component/base/RenderPagination';

const bannerImage = [
  'http://patpatwebstatic.s3.us-west-2.amazonaws.com/origin/product/000334001014/5da52c47d632b.jpg',
  'http://patpatwebstatic.s3.us-west-2.amazonaws.com/origin/product/007123000053/5ea64e3301a83.jpg',
  'http://patpatwebstatic.s3.us-west-2.amazonaws.com/origin/product/010694000094/5d5758ed21f74.JPG',
];
const styles = StyleSheet.create({
  home: {
    flex: 1,
    backgroundColor: '#fff',
  },
});
const Home = props => {
  const [top, setTop] = useState(0);
  const onScroll = useCallback(e => {
    const y = e.nativeEvent.contentOffset.y;
    if (y < 32) {
      setTop(y);
    } else {
      setTop(32);
    }
  }, []);
  useTrackData();
  const onChange = val => {
    console.log(val);
  };
  const on = val => {
    console.log(val);
  };
  return (
    <View style={styles.home}>
      <Swiper onScroll={on} onChange={onChange}>
      {/* <Swiper onScroll={on} renderPagination={<RenderPagination active={1} list={bannerImage} />} onChange={onChange}/> */}
        {bannerImage.map((item, index) => {
          return (
            <View key={index}>
              <Text>{index}</Text>
              <Image style={{width: '100%', height: '100%'}}  source={{uri: item}} width={'100%'}></Image>
            </View>
          );
        })}
      </Swiper>
      {/* <HomeTopSearch top={top} />
      <HomeTop />
      <ListLayout onScroll={onScroll} /> */}
    </View>
  );
};
export default Home;
